<template>
    <div
        id="login-box"
    >
        <!-- 上半红色遮罩 -->
        <!-- <div class="red-box"></div> -->
        <p class="login-title">嗨，
            <br>我的可爱人生 。
        </p>
        <div class="opt-box">
            <div
                class="register-box"
                @click="$router.push('/register')"
            >
                <div class="left">
                    <img
                        :src="require('@/assets/img/mail.png')"
                        alt="注册"
                    >
                </div>
                <div class="info">
                    <p class="title">新用户</p>
                    <p class="text">注册</p>
                </div>
                <img
                    class="right"
                    :src="require('@/assets/img/arr.png')"
                    alt
                >
            </div>
            <div
                class="login-box"
                @click="$router.push('/logindo')"
            >
                <div class="left">
                    <img
                        :src="require('@/assets/img/key.png')"
                        alt="登录"
                    >
                </div>
                <div class="info">
                    <p class="title">同步过往数据</p>
                    <p class="text">登录</p>
                </div>
                <img
                    class="right"
                    :src="require('@/assets/img/arr.png')"
                    alt
                >
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {};
    },
    created () {},
};
</script>
<style lang="less" scoped>
#login-box {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: relative;
    background-image: url('~@/assets/img/login-back.png');
    background-size: 100% 100%;
    background-color: #142547;
    color: #fff;
    user-select: none;

    // .red-box {
    //     width: 2000px;
    //     height: 2000px;
    //     background: #dc4f4a;
    //     transform: rotate(-12deg) translate(-30px, -600px);
    // }
    .login-title {
        font-size: 68px;
        /*px*/
        line-height: 1.3;
        margin-left: 40px;
        margin-top: 250px;
    }

    .opt-box {
        margin-left: 40px;
        margin-top: 200px;

        .register-box,
        .login-box {
            display: flex;
            align-items: center;
            margin-bottom: 60px;

            > .left {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 80px;
                height: 80px;
                padding-left: 20px;
                padding-right: 20px;
                border: 1px solid #fff;
                border-radius: 50%;
                img {
                    width: 100%;
                }
            }

            > .info {
                width: 530px;
                margin-left: 20px;
                line-height: 1.4;
                .title {
                    font-size: 30px; /*px*/
                }

                .text {
                    font-size: 48px; /*px*/
                }
            }

            > .right {
                width: 40px;
            }
        }

        .register-box {
        }

        .login-box {
        }
    }
}
</style>
